<template>
	<view class="content">
    <zero-loading v-if="loading" ></zero-loading>
    <my-search></my-search>
    <view class="index-box">
      <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"  
    :circular="true" class="index-cover">
         <swiper-item v-for="(item,i) in swiperList"  :key="i"  >
           <navigator :url="'/subpkg/book/book?book_id=' + item._id" class="swiper-item">
              <pImage class="cover"
                                     trans-opacity
                                     :transition-duration="1"
                                     :src="item.cover"
                                     placeholder="../../static/default.png"
                                     err='../../static/err.jpg'
                                     :height="100"
                                     :width="100"
                      />
           </navigator>
         </swiper-item>
      </swiper>
      <view class="box-type">
        <navigator :url="'/subpkg/tags/tags'" class="type">
          <image class="type-icon" src="../../static/icons/tags.png"></image>
          <text>分类</text>
        </navigator>
         <navigator :url="'/subpkg/link/link'" class="type">
          <image class="type-icon" src="../../static/icons/link.png"></image>
          <text>友链</text>
        </navigator>
        <navigator :url="'/subpkg/leave/leave'" class="type">
          <image class="type-icon" src="../../static/icons/leave.png"></image>
          <text>留言</text>
         </navigator>
        <navigator :url="'/subpkg/info/info'" class="type">
          <image class="type-icon" src="../../static/icons/kongjian.png"></image>
          <text>空间</text>
         </navigator>
      </view>
      <p class="tiemlink" >时间语录</p>
      <view class="timeline">
        <timeline :data="timeline"></timeline>
      </view>
      
      <view class="footer">
        code笔记
        <hr class="ft">
        不忘初心，方得始终！
      </view>
    </view>
	</view>
</template>

<script>
  import pImage from '@/components/p-image/index.vue'
	export default {
    components: {
        pImage
      },
		data() {
			return {
        loading:true,
        swiperList:{},
        timeline:[],
        page:0,
        count:9999
			}
		},
		onLoad() {
    this.getSwich()
    this.getSaying(this.page)
		},
   
		methods: {
     getSwich(){
       uni.$req.req(this,'getbooks',{length:5,random:true}).then((res)=>{
         let {data} =  res.result
         this.swiperList = data
       })
     },
     getSaying(pg){
         if(this.count<=this.page){
           return uni.$showMsg("没有更多数据")
         }
         uni.$req.req(this,'getsaying',{length:5,page:pg}).then((res)=>{
           let {result} = res
           this.count = result.count.total
           let data = result.data
           this.page += data.affectedDocs
           this.timeline = [...this.timeline,...data.data]
         })
     }
		},
    onReachBottom() {
      this.getSaying(this.page)
    },
    onPullDownRefresh() {
      this.swiperList = {}
      this.timeline = []
      this.page = 0
      this.count = 999
      this.getSwich()
      this.getSaying(this.page)
        // 关闭下拉刷新效果
        wx.stopPullDownRefresh()
    }
	}
</script>

<style lang="scss" scoped>
	.content {
		.index-box {
        display: flex;
        flex-direction: column;
        align-items: center;
      .index-cover{
        width: 650rpx;
        height: 300rpx;
        overflow: hidden;
        border-radius: 15px;
        margin-top: 20px;
        border: 3px solid #ccc;
        .swiper-item,
        .cover{
          width: 100%;
          height: 100%;
        }
      }
      
      .box-type{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 750rpx;
        margin: 10px 0;
        .type{
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          font-weight: bold;
          font-size: 16px;
          .type-icon{
            margin-bottom: 5px;
            width: 40px;
            height: 40px;
          }
        }
        
      }
   
    .timeline{
      width: 750rpx;
      margin: 20px 0;
    }
    .footer{
      position: fixed;
      bottom: 0;
      width: 750rpx;
      font-size: 12px;
      text-align: center;
      background: linear-gradient(to top, #eaeaea, #dbdbdb);
      border-top-left-radius:100px;
      border-top-right-radius: 100px;
         color: #99a2e2;
    }
    .ft {
    width: 80%;
    margin: 2px auto;
    height: 1px;
    background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0),
      cyan,
      rgba(0, 0, 0, 0)
    );
  }

    }
	}
  
  .tiemlink{
       font-size: 20px; font-weight: bold;text-align: left; 
       padding: 10px;
       width: 700rpx; 
       text-shadow: 0 1px #808d93,
                     -1px 0 #cdd2d5,
                     -1px 2px #808d93,
                     -2px 1px #cdd2d5,
                     -2px 3px #808d93,
                     -3px 2px #cdd2d5,
                     -3px 4px #808d93,
                     -4px 3px #cdd2d5,
                     -4px 5px #808d93;
              
  }
</style>
